<template>
  <div>
    <div>解析Vue文件了哟~</div>
    <p @click="goto">
      {{ name }}
    </p>
    <router-link to="/me">
      Go to About
    </router-link>
    <router-view />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from "vue"; // defineComponent 只是为了在使用 Vue3 时有很好的语法提示
import { useRouter } from "vue-router";
import { useStore } from 'vuex';
export default defineComponent({
  setup() {
    const name = ref("txm");
    const router = useRouter();
    function goto() {
      router.push("/home");
    }
     const store = useStore();
        const count = computed(() => store.state.count)//用 computed 包裹从 store 中获取的数据，可以保证数据的响应式
    return {
      name,goto,count
    };
  },
});
</script>
